<template>
    <div>
        <el-dialog :title="dataTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="420px" center @close="cancelClick">
            <div class="dialog-box">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item prop="name" label="类型名称">
                        <span v-if="dataType =='detail'">{{ form.name }}</span>
                        <el-input v-else v-model="form.name" placeholder="请输入类型名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="sort" label="排序号">
                        <span v-if="dataType =='detail'">{{ form.sort }}</span>
                        <el-input v-else type="number" v-model="form.sort" placeholder="请输入排序号"></el-input>
                    </el-form-item>
                    <el-form-item prop="enabled" label="是否启用">
                        <span v-if="dataType =='detail'">{{ form.enabled ? '是' : '否' }}</span>
                        <el-switch v-else v-model="form.enabled" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
                <div v-if="dataType !='detail'" class="btn-box">
                    <el-button class="btn" @click="cancelClick">取 消</el-button>
                    <el-button class="btn bg-blue" type="primary" @click="comfirmClick">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request";
export default {
    props: ['isDialog','dataTitle','dataType','dataInfo'],
    data() {
        return {
            title: '',
            form: {
                name: '',
                enabled: '',
                sort: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入类型名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序号', trigger: 'blur' }
                ],
            },
            dialogVisible: false
        }
    },
    created() {
       
    },
    methods: {
        cancelClick() {
            this.dialogVisible = false
            this.$emit('dialogChange')
        },
        comfirmClick() {
            let txtAction = ''
            let str = ''
            let id = ''
            if(this.dataType == 'modify') {
                id = this.dataInfo.id
                txtAction = 'update'
                str = '修改成功'
            } else {
                txtAction = 'insert'
                str = '添加成功'
            }
            this.$refs.form.validate((valid) => {
                if (valid) {
                    request({
                        url: '/manager/configmag/riskSrcTypeSave.jsp',
                        method: 'post',
                        data: {
                            id,
                            name: this.form.name,
                            enabled: this.form.enabled,
                            sort: this.form.sort,
                            txtAction
                        }
                    }).then(res => {
                        if(res.code == 200) {
                            this.$message({
                                message: str,
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.$emit('dialogChange')
                        }
                    })
                } else {
                    return false;
                }
            });
        }
    },
    watch: {
        isDialog(newVal, oldVal) {
            this.dialogVisible = newVal
            this.form.name = ''
            this.form.enabled = ''
            this.form.sort = ''
            if(this.dataType == 'detail' || this.dataType == 'modify') {
                this.form.name = this.dataInfo.name
                this.form.enabled = this.dataInfo.enabled
                this.form.sort = this.dataInfo.sort
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .btn-box{
        text-align: right;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
        }
        .bg-blue{
            background: #016aed;
        }
    }
    /deep/.dialog-box{
        .el-input{
            .el-input__inner{
                height: 32px;
                border-color: #d5d5d5;
            }
        }
    }
</style>